<template>
	<view class="content">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button"
				activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="img-box" v-for="(item,index) in petsData" :key="item._id">
				<image :src="item.url" lazy-load mode="widthFix" @click="onPerview(index)"></image>
				<view class="text-area">
					<text class="str">{{item.content}}</text>
					<text class="author">—— {{item.author}}</text>
				</view>
			</view>
		</view>
		
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="reload" size="30"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="30"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<!-- <view v-show="isReachBottom" class="load">加载中</view> -->
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from "vue";
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	const petsData = ref([])

	function getPetsData() {
		uni.request({
			url: 'https://tea.qingnian8.com/tools/petShow',
			data: {
				size: 5,
				type:classify[current.value].key
			},
			header: {
				// 需要每天看广告生成次数
				"access-key": "296927"
			}
		}).then(res => {
			petsData.value = [...petsData.value, ...res.data.data]
		}).finally(
			uni.stopPullDownRefresh()
		)
	}

	const imgList = ref([])
	const onPerview = function(index) {
		imgList.value = petsData.value.map(i => i.url)
		uni.previewImage({
			current: index,
			urls: petsData.value.map(i => i.url)
		})
	}

	const isReachBottom = ref(false)
	// 触底获取新数据
	onReachBottom(() => {
		// isReachBottom.value = true
		getPetsData()
	})
	// 下拉刷新----pages.json中对应页面需开启下拉刷新操作，默认不开启
	onPullDownRefresh(() => {
		petsData.value = []
		current.value = 0
		getPetsData()
	})
	// 点击刷新
	const onRefresh = () => {
		uni.startPullDownRefresh()
	}
	// 返回顶部
	const onTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100
		})
	}

	const current = ref(0)
	const classify = [{key:"all",value:"全部"},{key:"dog",value:"狗狗"},{key:"cat",value:"猫猫"}]
	const values = computed(()=>classify.map(item => item.value))
	// 点击菜单
	const onClickItem = (e) => {
		current.value = e.currentIndex
		petsData.value = []
		// console.log(classify[current.value]);
		getPetsData()
	}
	getPetsData()
</script>

<style lang="scss" scoped>
	.content {
		.menu,.layout,.img-box{
			margin: 0 auto;
			width: 600rpx;
		}
		.layout {
			padding-top: 50rpx;
			.img-box {
				margin-bottom: 30rpx;
				width: 600rpx;
				border: 1rpx solid #eee;
			
				image {
					width: 600rpx;
				}
			
				.text-area {
					padding: 30rpx;
				}
			
				.text-area>text {
					display: block;
					margin-top: 15rpx;
				}
			
				.author {
					text-align: right;
					font-size: 24rpx;
					color: darkgray;
				}
			
				.load {
					margin: 20rpx;
					color: darkgrey;
					align-items: center;
				}
			}
			
		}
		
		.float {
			position: fixed;
			padding-bottom: env(safe-area-inset-bottom);
			right: 30rpx;
			bottom: 80rpx;

			.item {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 15rpx;
				color: #eee;
				background-color: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				border: 1px solid #eee;
				text-align: center;
				line-height: 90rpx;
			}

		}

		.loadMore {
			padding-bottom: cacl(env(safe-area-inset-bottom) + 50rpx);
		}
	}
</style>